<template>
  <div class="comment">
    <van-nav-bar
      title="我的评价"
      left-text="返回"
      left-arrow
      @click-left="router.back()"
    />

    <div class="comment-list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell-group 
          v-for="review in reviews" 
          :key="review.id" 
          inset
          class="comment-item"
        >
          <van-cell :title="review.carName">
            <template #label>
              <div class="review-info">
                <van-rate :value="review.rating" readonly />
                <span class="time">{{ formatTime(review.createdAt) }}</span>
              </div>
              <div class="content">{{ review.content }}</div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { getUserReviews } from '@/api/review';
import dayjs from 'dayjs';

const router = useRouter();
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const reviews = ref([]);

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm');
};

const fetchReviews = async () => {
  try {
    loading.value = true;
    const data = await getUserReviews();
    reviews.value = [...reviews.value, ...data.reviews];
    finished.value = true; // 假设一次性获取所有评价
  } catch (error) {
    showToast(error.message || '获取评价失败');
  } finally {
    loading.value = false;
  }
};

const onLoad = () => {
  fetchReviews();
};

onMounted(() => {
  fetchReviews();
});
</script>

<style scoped lang="scss">
.comment {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 20px;

  .comment-list {
    padding: 12px 0;
  }

  .comment-item {
    margin-bottom: 12px;
  }

  .review-info {
    display: flex;
    align-items: center;
    margin: 8px 0;

    .time {
      margin-left: 12px;
      color: #999;
      font-size: 12px;
    }
  }

  .content {
    color: #333;
    font-size: 14px;
    line-height: 1.5;
  }
}
</style> 